<template>
    <div>
        <h1>Vue基础说法----创建单文件组件</h1>
        <h1>Vue基础说法----配置路由</h1>
        <h1>Vue基础说法----特点</h1>
        <h2>单页面应用程序</h2>
        <h2>数据驱动视图</h2>
        <h2>Vue使用的是响应式数据：数据变了，视图会自动更新</h2>
        <h1>Vue基础说法----html模版语法（插值语法+指令）</h1>
        <h2>{{ str }}</h2>
        <h2>{{ num }}</h2>
        <h2>{{ arr }}</h2>

        <input type="button" value="修改num值" v-on:click="fn">
        <input type="button" value="修改str值" @click="fn1">
    </div>
</template>

<script setup lang="ts">
//{{}}插值语法
//v-on：作用是绑定事件 简写@
//ref:声明响应式数据  一般用于声明基本类型的响应式数据：数值型、字符串、布尔、null 、undefined
//let 声明变量的关键字 const 声明常量的关键字
import{ref} from 'vue';
let str=ref('好好学习，天天向上');
let num=ref(100);
let arr = ref([1,2,3,4,5]);
let obj=ref({name:"张三",age:"20"});
let objArr=ref([
    {id:1,name:"张三",age:"20"},
    {id:2,name:"李四",age:"20"},
    {id:3,name:"王五",age:"20"}
])
const fn =()=>{
    num.value++;
}
const fn1=()=>{
    str.value='good good study,day day up';
}
const fn2=()=>{
    arr.value[2]=100;
}
const fn3=()=>{
    obj.value.name="李四";
}
const fn4=()=>{

}
</script>

<style scoped>
    
</style>